<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 影院
                </el-breadcrumb-item>
                <el-breadcrumb-item>排座</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">

            <div style="margin: 0 auto;text-align: center">
                &emsp;座位列数:
                <el-input type="text" maxLength='2' @change="now" oninput="value=value.replace(/[^\d]/g,'')"
                          style="width: 100px" placeholder="最大25" v-model="columns"/>
                &emsp;座位行数:
                <el-input type="text" maxLength='2' @change="now" oninput="value=value.replace(/[^\d]/g,'')"
                          placeholder="最大25" v-model="rows" style="width: 100px"/> &emsp;
                &emsp;影厅名称:
                <el-input type="text" v-model="math" @change="numberchange" style="width: 100px"/>

                影厅类型:
                <el-select style="width: 150px" v-model="halltypeid">
                    <el-option v-for="list in halltype" :value="list.cinemahalltypeid" :label="list.cinemahalltypename"
                               :key="list.cinemahalltypename"></el-option>
                </el-select>
                &emsp;
                &emsp;<el-button round type="button" v-on:click="onseat" v-if="flagq">创建视图</el-button>
                <el-button round type="button" v-on:click="onSubmitseat" v-if="flag">确认创建</el-button>
                <el-button round type="button" v-if="flag" v-on:click="cz">重置</el-button>
                &emsp;<span style="color: #ff0000;font-size: 10px">备注:超过限制则无法提交!!!!&emsp;点击座位删除&emsp;再次点击恢复</span>


            </div>
            <br>
            <br>
            <br>
            <br>
            <div style="width: 100%;height: 100%">
                <div style="margin: 0 auto;text-align: center">

    <span v-for="(items,i) in Number(rows)" v-if="flag">

    <span v-for="(item,index) in Number(columns)">
        <span class="seat" :data-column-id="index+1" :data-row-id="items" data-status-id="1" v-on:click="zw($event)"
        ><img src="../../assets/img/baz.png"/></span>
    </span>
      <br>
    </span>
                </div>


            </div>

            <div>

            </div>
        </div>

    </div>

</template>
<style type="text/css">
</style>
<script>
    import imgb from "../../assets/img/www.png";
    import imga from "../../assets/img/baz.png";

    export default {
        name: "seat",
        data() {
            return {
                flagq: true,
                math: '',
                halltypeid: '',
                CinemaHallDTO: {
                    seatListDTO: {
                        column: {},
                        row: {},
                        status: {},
                        hallname: '',
                        halltype: '',
                        cinemaid: '',
                    }
                },
                columns: 0,
                rows: 0,
                _this: '',
                count: '',
                flag: false,
                sum: 1,
                halltype: [],
                falgnumber: true,
                falgmath: false,
            };
        },
        watch: {
            columns: function (o, n) {
            }
        },
        methods: {
            numberchange() {
                let name = this.math
                this.axios.get("api/seat/findAllNumber?id=14&name=" + name).then((data) => {
                    console.log(data)
                    if (data.data > 0) {
                        alert("该名字已存在")
                        this.math = ''
                        this.falgmath = false;
                        return;
                    } else {
                        this.falgmath = true;
                    }
                })
            },
            now() {
                this.CinemaHallDTO.seatListDTO.column = ''
                this.CinemaHallDTO.seatListDTO.row = ''
                this.CinemaHallDTO.seatListDTO.status = ''

                this.sum = 1

            },
            onSubmit() {
                this.$message.success('提交成功！');
            },
            onSubmitseat() {
                if (this.columns > 25 || this.rows > 25 || this.rows == 0 || this.columns == 0) {
                    alert("数量错误")
                    return;
                }
                if (this.halltypeid <= 0) {
                    alert("请选择影厅类型")
                    return;

                }
                if (!this.falgmath) {
                    return;
                }
                if (this.math == '' || this.math == null) {
                    alert("请输入影院名称")
                    return;
                }

                let dataId = this.$(".seat");
                let column = '';
                let row = '';
                let status = '';
                for (let i = 0; i < dataId.length; i++) {
                    let data = dataId.eq(i);
                    column += data.attr("data-column-id")
                    row += data.attr("data-row-id")
                    status += data.attr("data-status-id")
                    if (i != dataId.length - 1) {
                        column += ","
                        row += ","
                        status += ","
                    }

                }
                this.CinemaHallDTO.seatListDTO.column = column.split(",")
                this.CinemaHallDTO.seatListDTO.columns = this.columns
                this.CinemaHallDTO.seatListDTO.row = row.split(",")
                this.CinemaHallDTO.seatListDTO.rows = this.rows
                this.CinemaHallDTO.seatListDTO.status = status.split(",")
                this.CinemaHallDTO.seatListDTO.hallname = this.math
                this.CinemaHallDTO.seatListDTO.halltype = this.halltypeid
                this.CinemaHallDTO.seatListDTO.halltype = this.halltypeid
                this.CinemaHallDTO.seatListDTO.cinemaid = '14'
                this.sum = 1

                let SeatListDTO = this.CinemaHallDTO

                console.log(SeatListDTO)
                console.log(JSON.stringify(SeatListDTO))
                this.axios.post("api/seat/addHallSeat", JSON.stringify(SeatListDTO)).then((data) => {
                    if (data.data > 0) {
                        alert("创建成功")
                        this.math = '';
                        this.halltypeid='';
                        this.cz()
                    } else {
                        alert("网络异常")
                    }
                })
            },
            cz() {
                this.columns = 0
                this.rows = 0
                this.flagq = true;
                this.flag = false
            },
            onseat() {
                if (this.columns > 25 || this.rows > 25 || this.rows == 0 || this.columns == 0) {
                    alert("数量错误")
                    return;
                }

                let column = '';
                let row = '';
                let status = '';
                for (let i = 0; i < this.rows; i++) {
                    for (let j = 0; j < this.columns; j++) {
                        column += j;
                        row += i;
                        status += 1
                        column += ","
                        row += ","
                        status += ","
                    }

                }

                this.CinemaHallDTO.seatListDTO.column = column.substring(0, column.length - 1).split(",")
                this.CinemaHallDTO.seatListDTO.row = row.substring(0, row.length - 1).split(",")
                this.CinemaHallDTO.seatListDTO.status = status.substring(0, status.length - 1).split(",")
                this.sum = 1
                this.flag = true;
                this.flagq = false;
                console.log(this.seat)
            },
            zw: function (objs) {
                let column = objs.currentTarget.getAttribute("data-column-id")
                let row = objs.currentTarget.getAttribute("data-row-id")
                let status = objs.currentTarget.getAttribute("data-status-id")
                if (status == 1) {
                    if (this.sum == Number(this.columns) * Number(this.rows)) {
                        alert("最少保留一个座位")
                        return;
                    }
                    this.sum = this.sum + 1;

                    objs.currentTarget.setAttribute("data-status-id", 0)
                    let img = objs.target.setAttribute("src", imgb);
                } else if (status == 0) {
                    this.sum = this.sum - 1;

                    objs.currentTarget.setAttribute("data-status-id", 1)
                    let img = objs.target.setAttribute("src", imga);
                }

            },

        },
        created() {
            this.axios.get("api/seat/findAllHallType", null).then((data) => {
                this.halltype = data.data
                console.log(this.halltype)
            })

        }
    }
</script>


